<template>
  <div>
    <!-- 男生分类 -->
    <ul class="male">
      <h3>
        <i class="el-icon-user-solid"></i>&nbsp;男生分类
      </h3>
      <li v-for="item in maleKind" :key="item.id">
        <router-link to="/3/male">
          <a>{{item.name}}</a>
        </router-link>
      </li>
      <h1></h1>
    </ul>
    <!-- 女生分类 -->
    <ul class="female">
      <h3>
        <i class="el-icon-lollipop"></i>&nbsp;女生分类
      </h3>
      <li v-for="item in femaleKind" :key="item.id">
        <router-link to="/3/female">
          <a>{{item.name}}</a>
        </router-link>
      </li>
      <h1></h1>
    </ul>
    <!-- 排行榜 -->
    <div class="rank">
      <h3 class="topRank">最热排行榜</h3>
      <el-tabs v-model="activeName" @tab-click="handleClick" :stretch="true">
        <el-tab-pane label="男生最热排行榜" name="first">
          <ul>
            <li class="top1">
              <div class="info">
                <h3>NO.1</h3>

                <h4 @click="sendID(jianlaiData._id)">{{jianlaiData.title}}</h4>

                <p class="flower">
                  <span>{{jianlaiData.latelyFollower}}</span>花朵
                </p>
                <p class="author">
                  {{jianlaiData.minorCate}}
                  <i>·</i>
                  {{jianlaiData.author}}
                </p>
              </div>
              <div class="img">
                <img :src="jianlaiImg" alt @click="sendID(jianlaiData._id)" />
              </div>
              <h1></h1>
            </li>
            <li v-for="(item,i) in maleRankData" :key="item.id" class="top10">
              <span class="num">{{i+2}}</span>
              <span class="rankName" @click="sendID(item._id)">
                &nbsp;
                {{item.title}}
              </span>
              <h1></h1>
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="女生最热排行榜" name="second">
          <ul>
            <li class="top1">
              <div class="info">
                <h3>NO.1</h3>

                <h4 @click="sendID(yifeiData._id)">{{yifeiData.title}}</h4>

                <p class="flower">
                  <span>{{yifeiData.latelyFollower}}</span>花朵
                </p>
                <p class="author">
                  {{yifeiData.cat}}
                  <i>·</i>
                  {{yifeiData.author}}
                </p>
              </div>
              <div class="img">
                <img :src="yifeiImg" alt @click="sendID(yifeiData._id)" />
              </div>
              <h1></h1>
            </li>
            <li v-for="(item,i) in femaleRankData" :key="item.id" class="top10">
              <span class="num">{{i+2}}</span>
              &nbsp;&nbsp;
              <span
                @click="sendID(item._id)"
                class="rankName"
              >{{item.title}}</span>
            </li>
          </ul>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 新书推荐 -->
    <div class="recommend">
      <h3 class="bookRec">新书推荐</h3>
      <div class="recCon">
        <img src="../../assets/wzy/imgs/tj.jpg" alt @click="sendID(meihuoID)" />
        <h3 @click="sendID(meihuoID)">魅姬惑天下</h3>
        <p>
          <span>黑心的猫</span>
          <span>&nbsp;·&nbsp;</span>
          <span>日更3千+</span>
        </p>
        <p>
          <span>1358</span>
          <span>人再追</span>
        </p>
        <p>媚主出，天下乱！风华绝世，天涯海角，你在，我必相随！</p>
        <el-button type="danger" round size="small" @click="sendID(meihuoID)">立即阅读</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { allKind } from "../../api/wzy/index";
import { allRank } from "../../api/wzy/index";
import { maleRank } from "../../api/wzy/index";
import { femaleRank } from "../../api/wzy/index";
import { jianlai } from "../../api/wzy/index";
import { yifei } from "../../api/wzy/index";
import { newBook } from "../../api/wzy/index";

import { mapMutations, mapGetters } from "vuex";
export default {
  computed: {
    // ...mapMutations(["getnewBook"])
    ...mapGetters(["setNewBook"]),
    ...mapGetters(["setCover"])
  },
  data() {
    return {
      num: 2,
      activeName: "first",
      maleKind: [],
      femaleKind: [],
      maleRankId: "",
      femaleRankId: "",
      maleRankData: "",
      femaleRankData: "",
      jianlaiData: "",
      jianlaiImg: "",
      yifeiData: "",
      yifeiImg: "",
      meihuoID: "5d19bdd344352a11ae9059dc"
    };
  },
  created() {
    //获取所有小说类型
    allKind().then(res => {
      //   console.log(res.data.female);
      this.femaleKind = res.data.female;
      this.maleKind = res.data.male;
    });
    //获取最热排行榜ID
    allRank().then(res => {
      this.maleRankId = res.data.male[0].monthRank;
      this.femaleRankId = res.data.female[0].monthRank;
      //   console.log(res.data.female[0].monthRank);
      //   console.log(res.data.male[0].monthRank);
    });
    //获取剑来小说信息
    jianlai().then(res => {
      this.jianlaiData = res.data;
      this.jianlaiImg = unescape(res.data.cover.slice(7));
    });
    //获取医妃权倾天下小说信息
    yifei().then(res => {
      this.yifeiData = res.data;
      this.yifeiImg = unescape(res.data.cover.slice(7));
    });
    //新书推荐
    newBook().then(res => {
      console.log(res);
      this.$store.commit("getnewBook", res.data.ranking.books);
    });
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    //发送ID到localStorage中
    sendID(id) {
      localStorage.setItem("_id", id);
      this.$router.push({ path: "/bookdetails" });
    }
  },
  watch: {
    maleRankId: function(newVal, oldVal) {
      //获取男生最热排行榜数据
      maleRank(newVal).then(res => {
        this.maleRankData = res.data.ranking.books.splice(4, 9);
        // console.log(this.maleRankData);
      });
    },
    femaleRankId: function(newVal, oldVal) {
      //获取女生最热排行榜数据
      maleRank(newVal).then(res => {
        this.femaleRankData = res.data.ranking.books.splice(1, 9);
        // console.log(this.femaleRankData);
      });
    }
  }
};
</script>

<style scoped>
ul.male,
ul.female {
  border: 1px solid #f3dae3;
}
h1 {
  clear: both;
}
ul.male h3,
ul.female h3 {
  padding: 20px 0 20px 55px;
  color: #ff5e66;
  font-size: 18px;
  background: #fbe9ef;
}
ul.male h3 i,
ul.female h3 i {
  font-size: 18px;
}
ul.male li,
ul.female li {
  padding: 0 30px;
  float: left;
  width: 79px;
  text-align: center;
  height: 50px;
  line-height: 50px;
}
ul.male li a,
ul.female li a {
  color: #333;
  font-size: 14px;
}
ul.male li a:hover,
ul.female li a:hover {
  color: rgb(255, 94, 102);
}
li:nth-of-type(1),
li:nth-of-type(2),
li:nth-of-type(5),
li:nth-of-type(6),
li:nth-of-type(9),
li:nth-of-type(10),
li:nth-of-type(13),
li:nth-of-type(14) {
  /* background: rgb(251, 250, 248); */
  background: white;
}
li:nth-of-type(3),
li:nth-of-type(4),
li:nth-of-type(7),
li:nth-of-type(8),
li:nth-of-type(11),
li:nth-of-type(12) {
  background: #fbe9ef;
}
.female {
  margin-top: 40px;
}
.rank {
  margin-top: 40px;
}
.rank .topRank {
  font-size: 18px;
  color: #1a1a1a;
  border-bottom: 2px solid #666;
  line-height: 26px;
  overflow: hidden;
  height: 24px;
  padding-bottom: 8px;
}
.rank ul li {
  /* background: rgb(251, 250, 248); */
  background: white;
  font-size: 14px;
}
/* .rank ul .top1 {
  border-bottom: 1px solid #e6e6e6;
} */
.rank ul .top1 h3 {
  font: 700 14px/18px Arial;
  width: 36px;
  height: 18px;
  margin-bottom: 3px;
  text-align: center;
  color: #fff;
  background: #ff5e66;
}
.rank ul .top1 h4 {
  font: 16px/24px PingFangSC-Regular, HelveticaNeue-Light,
    "Helvetica Neue Light", "Microsoft YaHei", sans-serif;
  overflow: hidden;
  height: 24px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #1a1a1a;
  cursor: pointer;
}
.flower {
  font-size: 12px;
  overflow: hidden;
  height: 24px;
  padding: 3px 0 0;
  color: #ff5e66;
}
.flower span {
  font-family: Arial;
  font-size: 18px !important;
  margin-right: 3px;
  font-style: normal;
}
.author {
  /* font-family: PingFangSC-Regular, "-apple-system", Simsun; */
  font-size: 12px;
  overflow: hidden;
  height: 16px;
  color: #a6a6a6;
}
.top1 .info {
  float: left;
}
.top1 .img {
  float: right;
}
.top1 .img img {
  width: 80px;
  height: 100px;
  cursor: pointer;
}
.rank ul .top10 {
  height: 30px;
  border-top: 1px solid #e6e6e6;
  line-height: 30px;
  font-size: 14px;
}
.rank ul .top10 .rankName:hover {
  color: #ff6169;
  cursor: pointer;
}
.rank ul .top10 .num {
  font: 700 14px/16px Arial;
  display: block;
  overflow: hidden;
  width: 16px;
  height: 16px;
  margin-top: 8px;
  text-align: center;
  letter-spacing: -1px;
  color: #666;
  background: #ededed;
  float: left;
}
.rank ul .top10 .rankName {
  float: left;
  color: #1a1a1a;
}

.recommend {
  margin-top: 40px;
}
.recommend .bookRec {
  font-size: 18px;
  color: #1a1a1a;
  border-bottom: 2px solid #666;
  line-height: 26px;
  overflow: hidden;
  height: 24px;
  padding-bottom: 8px;
  margin-bottom: 20px;
}
.recommend .recCon {
  text-align: center;
  background: #fbe9ef;
}
.recommend .recCon img {
  width: 180px;
  padding: 30px 0 10px 0;
  cursor: pointer;
}
.recommend .recCon h3 {
  font-size: 16px;
  color: #1a1a1a;
  margin: 10px 0;
  cursor: pointer;
}
.recommend .recCon p:nth-of-type(1) {
  padding: 3px 0 5px;
  color: #ff5e66;
  font-size: 14px;
}
.recommend .recCon p:nth-of-type(2) {
  font-size: 14px;
  margin-bottom: 10px;
}
.recommend .recCon p:nth-of-type(2) span:nth-of-type(1) {
  font-size: 16px;
  font-weight: 700;
}
.recommend .recCon p:nth-of-type(3) {
  margin: 0 60px 33px 60px;
  font-size: 12px;
  color: #626260;
}
.recommend .recCon .el-button {
  margin-bottom: 30px;
}
</style>